<template>
  <div id="el_select_city">
    <img :src="src"
         v-if="src">
    <span>{{title}}</span>
    <el-select v-model="my_province"
               @change="change01"
               placeholder="请选择">
      <el-option v-for="item in computed_province"
                 :key="item"
                 :value="item">
      </el-option>
    </el-select>
    <el-select class="ml_10"
               v-model="my_city"
               @change="change02"
               placeholder="请选择">
      <el-option v-for="item in computed_citys"
                 :key="item"
                 :value="item">
      </el-option>
    </el-select>
  </div>
</template>

<script>
// import { province_city } from '../common/province_city.js';
import { getCity } from "@/api";
export default {
  name: 'el_select_city',
  components: {},
  data() {
    return {
      my_province: this.value.split(',')[0],
      my_city: this.value.split(',')[1],
      computed_province:[],
      computed_citys:[],
    }
  },
  computed: {
    // computed_province() {
    //   let arr = this.$store.state.province_city.map((item, index) => {
    //     return item.name
    //   })
    //   arr.unshift('不限')
    //   return arr
    // },
    // computed_citys() {
    //   if (this.my_province == '不限') {
    //     return ['不限']
    //   } else {
    //     let arr = this.$store.state.province_city.filter((item, index) => {
    //       if (item.name == this.my_province) {
    //         return item
    //       }
    //     })
    //     return arr[0].city
    //   }
    // },
  },

  model: {
    prop: 'value',
    event: 'returnBack',
  },
  props: ['value', 'src', 'title'],

  created: function () {
    if(this.$store.state.province_city.length){
      this.initStore();
    }else{
      getCity().then((res)=>{
        if(res.data.code == 0){
          let dataList = res.data.data;
          dataList.map((item, index) => {
            item.city.unshift('不限');
            item.cid.unshift(0);
          });
          this.$store.commit('change_province_city', dataList);
          this.initStore();
        }
      });
    }
    this.$watch('value', function (newValue, oldValue) {
      this.my_province = this.value.split(',')[0]
      this.my_city = this.value.split(',')[1]
    })
  },
  mounted() {},
  methods: {
    initStore(){
      if(this.$store.state.province_city.length){
        this.computed_province = this.$store.state.province_city.map((item, index) => {
          return item.name;
        });
        this.computed_province.unshift('不限');

        if(this.my_province == '不限'){
          this.computed_citys = ['不限'];
        }
      }
    },
    change01() {
      this.my_city = '不限';
      if(this.my_province == '不限'){
        this.computed_citys = ['不限'];
      }else{
        let citys = this.$store.state.province_city.filter((item, index) => {
          if (item.name == this.my_province) {
            return item;
          }
        });
        this.computed_citys = citys[0].city;
      }
      this.$emit('returnBack', this.my_province + ',' + this.my_city)
    },
    change02() {
      this.$emit('returnBack', this.my_province + ',' + this.my_city)
    },
  },
}
</script>
<style scoped lang='less'>
#el_select_city {
  > span {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    color: #555;
    letter-spacing: 0px;
    margin-right: 16px;
    white-space: nowrap;
  }
  > img {
    width: 16px;
    margin-right: 10px;
  }
  display: flex;
  width: fit-content;
  align-items: center;
}
</style>
